import React, { Component } from 'react'
import { Layout, Menu, Image } from 'antd'
import { Outlet, NavLink } from 'react-router-dom'
import { fetchUserInfo } from '../api'
import {} from 'antd'
import './adminStyle.css'

import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons'
// 左右布局 header头部组件
const { Header, Content, Footer, Sider } = Layout

export default class AdminLayout extends Component {
  state = {
    avatar: '',
  }
  componentDidMount() {
    this.getUserInfo()
  }

  getUserInfo = async () => {
    const response = await fetchUserInfo()
    // console.log('response:', response.data)
    this.setState({
      avatar: response.data.avatar,
    })
  }

  render() {
    return (
      <Layout className="wrapper">
        <Sider
          breakpoint="lg"
          collapsedWidth="0"
          onBreakpoint={(broken) => {
            console.log(broken)
          }}
          onCollapse={(collapsed, type) => {
            console.log(collapsed, type)
          }}
        >
          <div className="logo" />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            <Menu.Item key="1" icon={<UserOutlined />}>
              <NavLink to="/admin">仪表盘</NavLink>
            </Menu.Item>
            <Menu.Item key="2" icon={<VideoCameraOutlined />}>
              <NavLink to="/admin/ums">用户管理</NavLink>
            </Menu.Item>
            <Menu.Item key="3" icon={<UploadOutlined />}>
              nav 3
            </Menu.Item>
            <Menu.Item key="4" icon={<UserOutlined />}>
              nav 4
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Header className="site-layout-sub-header-background" style={{ padding: 0 }}>
            {console.log(this.state.avatar, 'this.state.avatar')}
            <Image
              width={50}
              height={50}
              preview={false}
              src={this.state.avatar}
              fallback=""
            />
          </Header>
          <Content style={{ margin: '24px 16px 0' }}>
            <div className="site-layout-background" style={{ padding: 24, minHeight: 650 }}>
              <Outlet></Outlet>
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>
      </Layout>
    )
  }
}
